// 采购管理
// import PurchasingTable from "./PurchasingTable"; //暂无作用
// import OrderPreview from "../OrderPreview/OrderPreview";
import AddOrder from "../AddOrder/AddOrder";
import React, { useState, useEffect } from "react";
import InputComponents from "../InputComponents";
import { DatePicker } from 'antd';
import { Table } from 'antd';
import DelModal from "./DelModal";
import './PurchasingManagement.css';
import purchasing from '../../../service/Purchasing'
import { useNavigate } from 'react-router-dom'


const PurchasingManagement = () => {
    const navigate = useNavigate()

    // 周期
    useEffect(() => {
        selectList()
    }, [])


    //------------------------------------数据区域 ------------------------------------
    // Tab数据
    const [purTab, setpurTab] = useState();
    const [delShow, setdelShow] = useState();
    const columns = [
        {
            title: '编号',
            dataIndex: 'purchaseOrderId',
            render: (text, record) => (
                <a href='#!'>
                    {record.purchaseOrderId}

                </a>
            ),
        },
        {
            title: '创建日期',
            dataIndex: 'purchaseUseDate',
        },
        {
            title: '供货商',
            dataIndex: 'paymentType',
        },
        {
            title: '总金额',
            dataIndex: 'orderTotalAmount',
        },
        {
            title: '需用日期',
            dataIndex: 'purchaseUseDate',
        },
        {
            title: '创建人',
            dataIndex: 'purchaseOrderCreator',
        },
        {
            title: '审批',
            dataIndex: 'purchaseOrderApprover',
        },
        {
            title: '状态',
            dataIndex: 'purchaseOrderStatus',
        },
        {
            title: '审批操作',
            dataIndex: 'shenpicaozuo',
            render: (text, record) => <a href='#!'>{record.shenpicaozuo}</a>
        },
        {
            title: '操作',
            dataIndex: 'caozuo', //这是对应Data的字段
            render: (text, record) => {
                //判断渲染啥
                if (record.shenpicaozuo === '入库' || '') {
                    return <span >
                        <a href='#!'> 编辑 </a>
                        <a href='#!'> 预览 </a>
                        <a href='#!' onClick={() => delOrder(record.purchaseOrderId)} > 删除 </a>
                        <DelModal id={record.purchaseOrderId} />
                    </span>

                } else {
                    return <div>
                        {/* <a className='Atag' onClick={()=>delOrder(record.purchaseOrderId)} href='#!'>  删除  </a> */}
                        <DelModal text='删除' id={record.purchaseOrderId} />
                        <a href='' onClick={() => navigate('/home/1/cgyl')}>预览  </a>
                    </div>
                }

            },

        },
    ];


    const { RangePicker } = DatePicker;
    // 供货商表单的相关数据

    let supplierValue = null;
    const supplierData = [
        { id: 1, value: '后端' },
        { id: 2, value: '前端' },
        { id: 3, value: '美好超市' }
    ]
    const supplier = (a) => {
        supplierValue = a
        return console.log('父组件获取的值：', supplierValue)
    }
    // 采购状态下拉框相关数据
    let purchaseStatusValue = null;
    const purchaseStatusData = [
        { id: 1, value: '后端' },
        { id: 2, value: '前端' },
        { id: 3, value: '美好超市' }
    ]
    const purchaseStatus = (a) => {
        purchaseStatusValue = a
        return console.log('父组件获取的值：', purchaseStatusValue)
    }

    //获取日期
    const getDate = (value, mode) => {
        console.log('value', value[0]._d)

        console.log('mode', mode)
    }

    //----------------------------- 函  数  区  域  ---------------------------

    // 分页查询订单
    function selectList() {
        purchasing.Query_PurOrderList({
            method: "get",
            data: {
                pageSize: 10,
                currentPage: 1,
            }
        })
            .then((res) => {
                setpurTab([...res.data.data])
                console.log('res1', res.data.data)
                console.log('data', purTab)
            })
            .catch((err) => {
                console.log('err', err)
            })
    }

    //删除订单
    const delOrder = (purchaseOrderId) => {
        // console.log('删除', purchaseOrderId)
        purchasing.Delete_PurOrder({
            method: "POST",
            data: {
                purchase_order_id: purchaseOrderId
            }
        })
            .then((res) => {
                console.log('res1', res)
            })
            .catch((err) => {
                console.log('err', err)
            })
    }
    const delDiv = () => {
        setdelShow('block')
    }





    // 表格数据相关
    const beijianji = () => {

        //添加订单请求
        // purchasing.Add_SalesOrder({
        //     method: 'post',
        //     data: {
        //         "orderTotalAmount": 0,
        //         "paymentType": "string",
        //         "purchaseApprovalComments": "string",
        //         "purchaseApprovalStatus": 0,
        //         "purchaseCreateDate": "string",
        //         "purchaseOrderApprover": "string",
        //         "purchaseOrderCreator": "string",
        //         "purchaseOrderId": 0,
        //         "purchaseOrderStatus": 0,
        //         "purchaseUseDate": "string",
        //         "supplierId": 0
        //     }
        // })
        //     .then((res) => {
        //         console.log('res1', res)
        //     })
        //     .catch((err) => {
        //         console.log('err', err)
        //     })

        //审核订单
        //     purchasing.Approval_PurOrder({
        //         method: "POST",
        //         data: {
        //             purchase_approval_comments: '同意但不完全同意',
        //             purchase_order_id: '9527'
        //         }
        //     })
        //         .then((res) => {
        //             console.log('res1', res)
        //         })
        //         .catch((err) => {
        //             console.log('err', err)
        //         })
        // }




    }
    // 订单预览
    //     purchasing.Query_PurOrderListById({
    //         method: "post",
    //         data: {
    //             purchase_order_id :'9527',
    //         }
    //     })
    //         .then((res) => {
    //             console.log('res1', res.data)
    //         })
    //         .catch((err) => {
    //             console.log('err', err)
    //         })
    // }
    // 编辑采购订单信息接口
    //     purchasing.Update_PurOrder({
    //         method: "post",
    //         data: {
    //             "orderTotalAmount": 0,
    //             "paymentType": "string",
    //             "purchaseApprovalComments": "string",
    //             "purchaseApprovalStatus": 0,
    //             "purchaseCreateDate": "string",
    //             "purchaseOrderApprover": "string",
    //             "purchaseOrderCreator": "string",
    //             "purchaseOrderId": 0,
    //             "purchaseOrderStatus": 0,
    //             "purchaseUseDate": "string",
    //             "supplierId": 0
    //         }
    //     })
    //         .then((res) => {
    //             console.log('res1', res.data)
    //         })
    //         .catch((err) => {
    //             console.log('err', err)
    //         })
    // }


    // const zijin = () => {

    //     //确认发货
    //     // capital.consignments({
    //     //     method: 'post',
    //     //     data: {
    //     //         sales_order_id: '1'
    //     //     }
    //     // })
    //     //     .then((res) => {
    //     //         console.log('res1', res)
    //     //     })
    //     //     .catch((err) => {
    //     //         console.log('err', err)
    //     //     })

    //     //查询
    // //     capital.selectSalesMan()
    // //         .then((res) => {
    // //             console.log('res1', res)
    // //         })
    // //         .catch((err) => {
    // //             console.log('err', err)
    // //         })
    // }

    return (

        <div className="PurchasingManagement" >
            <div className="all">
                <div>


                    {/* 采购管理 */}
                    <div className="top1">
                        <span>采购管理</span>
                    </div>
                    {/* 日历及下拉框 */}
                    <div className=" top2">
                        <div className="input2">
                            创建日期:<RangePicker onChange={getDate} placeholder={['开始时间', '结束时间']} renderExtraFooter={() => 'extra footer'} />
                        </div>
                        <div className="input1">
                            供货厂商：<InputComponents InputValue={supplierData} passData={supplier} placeholder='供货商' />
                        </div>
                        <div className="input1">
                            采购状态：<InputComponents InputValue={purchaseStatusData} passData={purchaseStatus} placeholder='全部' />
                        </div>

                        <button className="btn-1" >查询</button>
                    </div>
                    <div className="top3">
                        <div className="top3-left">采购列表</div>
                        <div className="top3-right">
                            <div className="top3-btn">
                                <button className="btn-1" onClick={() => { navigate('/home/1/cgsq') }}>  添加  </button>
                                <button className="btn-1">  导出  </button>
                                <button className="btn-1">  排序方式  </button>
                            </div>
                        </div>
                    </div >
                </div>

                {/* 表格 */}
                <div>
                    <Table bordered columns={columns} dataSource={purTab} />
                    {/* <PurchasingTable data={purTab} /> */}
                    <div className="span-0 clear">
                        CopyRight @ 极优科技&nbsp;&nbsp; 2020
                    </div>
                </div>

                {/* 订单预览 */}
                {/* <OrderPreview /> */}

                {/* 添加订单 */}

                <AddOrder />
                <button onClick={beijianji} >qingqiuceshi</button>

            </div>
        </div>

    )
}

export default PurchasingManagement;







